import React, { useRef, useState, useEffect } from 'react';

import { TreeSelect } from 'antd';
const App = () => {
    const [value, setValue] = useState();
    const [treeData, setTreeData] = useState([
        {
            id: 1,
            pId: 0,
            value: '1',
            title: 'Expand to load',
            name: 'Expand to load',
        },
        {
            id: 2,
            pId: 0,
            value: '2',
            title: 'Expand to load',
            name: 'Expand to load',
        },
        {
            id: 3,
            pId: 0,
            value: '3',
            title: 'Tree Node',
            name: 'Tree Node',
            isLeaf: true,
        },
    ]);
    const genTreeNode = (parentId, isLeaf = false) => {
        const random = Math.random().toString(36).substring(2, 6);
        return {
            id: random,
            pId: parentId,
            value: random,
            title: isLeaf ? 'Tree Node' : 'Expand to load',
            name: isLeaf ? 'Tree Node' : 'Expand to load',
            isLeaf,
        };
    };
    const onLoadData = ({ id }) =>
        new Promise((resolve) => {
            setTimeout(() => {
                setTreeData(
                    treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
                );
                resolve(undefined);
            }, 300);
        });
    const onChange = (newValue) => {
        console.log(newValue);
        setValue(newValue);
    };

    return (
        <>
            <div >
                <TreeSelect
                    showSearch
                    treeDataSimpleMode
                    style={{
                        width: '100%',
                    }}
                    value={value}
                    dropdownStyle={{
                        maxHeight: 400,
                        overflow: 'auto',
                    }}
                    placeholder="Please select"
                    onChange={onChange}
                    loadData={onLoadData}
                    treeData={treeData.map((item) => {
                        return {
                            ...item,
                            title: item.name,
                            value: item.value,
                        }
                    })
                    }
                />
            </div>
        </>
    );
};
export default App;